<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>购物车</title>
		<link rel="stylesheet" href="../css/cart.css">
		<link rel="stylesheet" type="text/css" href="../fonts/iconfont.css">
		<style>
			.iconfont {
				vertical-align: middle;
			}
		</style>
	</head>
	<body>
		<div class="dinwei">
			<div class="heard">
				<div class="content">
					<div class="box1">
						<div class="one">
							<a href="">oppo官网</a>
							<a href="">一加官网</a>
						</div>
						<div class="one-1">
							<a href="" id="act">下载OPPO商城App</a>
							<a href="./profile.html"><span
									class="iconfont icon-yonghu-xianxing"></span>&nbsp;&nbsp;倾念დ</a>
							<a href="./profile.html">我的订单</a>
							<a href="../index.html">退出</a>
							<a href="" style="border: none;">&#128722;购物车(2)</a>
						</div>
					</div>
				</div>
			</div>
			<div class="column">
				<div class="content">
					<div class="two">
						<h1>
							<a href="./indextwo.html">
								<img src="../img/9c6f387.png" style="width: 238px;height: 50px; display: inline-block;">
							</a>
						</h1>
						<div class="two1">
							<a href="">OPPO专区</a>
							<a href="">OnePlus专区</a>
							<a href="">智能硬件</a>
							<a href="">服务</a>
						</div>
						<div class="two2">
							<input type="text" placeholder="OPPO K10x">
							<span style="display: inline-block; margin-left:-3px; ">
								<span id="btno" style="display: inline-block; margin-left:-3px;"><span
										class="iconfont icon-search"></span></span></span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="content">
			<div class="box-er">
				<img src="../img/二维码.jpg" alt="">
				<p>扫描下载OPPO商城App</p>
			</div>
		</div>
		<div class="discount">
			<p class="text3">
				共两件商品<span class="disc">优惠券</span>
			</p>
			<div class="box-dis hide">
				<p class="text1">领券享优惠</p>
				<p class="text2">领取后可用于购物车商品</p>
				<div class="box-disc">
					<div class="box-disco">
						<div class="man">
							<p>￥<span style="font-size: 24px;">10</span></p>
							<p>满700可用</p>
						</div>
						<div class="quan">
							<p><b>OPPO 手机10元会员券</b></p>
							<p>2022.09.22 00:00-2022.09.30 23:59</p>
						</div>
						<div class="lin">
							<p class="text4">已领取</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="tab">
			<p>商品
				<span style="margin-left: 537px;">单价</span>
				<span style="margin-left:264px;">数量</span>
				<span style="margin-left:215px;">操作</span>
			</p>
		</div>
		<div class="form" style="margin-top: 36px;">
			<input type="checkbox" id="allbtn2" checked>
			<div class="phone" id="phone">
				<img src="../img/8pro+.png" alt="">
			</div>
			<div class="reno8pro">
				<a href="./opporeno8pro+.html">
					<p class="pro" style="margin-bottom: 10px;"><b>OPPO Reno8 Pro+<span id="wainei">12G+256G</span>
							<span id="waicolor">逍遥青</span>
							官方标配 </b>
					</p>
				</a>
				<div class="upd">
					<p id="update11"><span id="wainei1">12G+256G</span><span id="waicolor1">逍遥青</span>,...<span
							style="float: right;">▼</span></p>
				</div>
			</div>
			<div class="price">
				<p>￥<span style="font-size: 27px;" id="one11">3999</span></p>
				<p>预估到手价：￥<span id="yugu">3995.01</span></p>
			</div>
			<div class="num">
				<div class="adsu">
					<button id="one">-</button><span style="padding: 0 10px;" id="one22">1</span>
					<button id="two">+</button>
				</div>
				<p>限购1件</p>
			</div>
			<div class="operation">
				<p class="dell">删除商品</p>
				<p class="update1">修改商品</p>
			</div>
		</div>
		<div class="form">
			<input type="checkbox" id="allbtn1" checked>
			<div class="phone" id="phone1">
				<img src="../img/findx5pro.png" alt="">
			</div>
			<div class="reno8pro">
				<a href="./commodity.html">
					<p class="pro" style="margin-bottom: 10px;"><b>OPPO Find X5 pro <span id="waicolor11">白瓷</span>
							<span id="wainei11">12+512G</span>
							官方标配</b>
					</p>
				</a>
				<div class="upd">
					<p id="update22"><span id="waicolor111">白瓷</span><span id="wainei111">12+512G</span>官方...<span
							style="float: right;">▼</span></p>
				</div>
			</div>
			<div class="price">
				<p>￥<span style="font-size: 27px;" id="two11">5499</span></p>
				<p>预估到手价：￥<span id="yugu1">5492.99</span></p>
			</div>
			<div class="num">
				<div class="adsu"><button id="three">-</button><span style="padding: 0 10px;" id="num">1</span>
					<button id="four">+</button>
				</div>
				<p>限购2件</p>
			</div>
			<div class="operation">
				<p class="dell">删除商品</p>
				<p class="update2">修改商品</p>
			</div>
		</div>
		<div class="footer">
			<div class="content">
				<input type="checkbox" id="allbtn" checked>
				<div class="quanx">
					<p>全选</p>
				</div>
				<div class="sum">
					<p>
						<b>合计:</b>
						<span style="font-size: 28px; color: red;">￥</span>
						<span style="font-size:43px; color: red;" id="heji">9988</span>
					</p>
					<p>
						<span class="tete">优惠:&nbsp;&nbsp;&nbsp;&nbsp;￥10</span>
					<div class="minxi">优惠明细</div>
					</p>
				</div>
				<a href="./Confirm order.html">
					<div class="queren">
						去结算(2)
					</div>
				</a>

				<div class="minxis hide">
					<div class="x" id="x">
						<img src="../img/login/x.png" alt="">
					</div>
					<p class="tret">优惠明细</p>
					<div class="asd">
						<p>商品总额<span>￥<span id="asd">9998</span></span></p>
						<p>优惠券优惠<span>-￥10</span></p>
						<p style="color: rgba(0,0,0,.55);
    line-height: 18px;">已领券:-￥10</p>
						<p style="font-size: 16px; color: rgba(0,0,0,.85);">优惠总计:<span style="color:red;">-￥10</span>
						</p>
						<p>
							以上优惠不包含积分抵扣、支付优惠、运费，预计领取券数量有限，可能会领取失败，最终以结算页为准。
						</p>
					</div>
				</div>
			</div>
		</div>
		<div class="form-bg hide">
			<div class="upda">
				<div class="x" id="xx">
					<img src="../img/login/x.png" alt="">
				</div>
				<div class="image">
					<div class="imgase" id="rn8">
						<img src="../img/8pro+.png" alt="">
					</div>
					<div class="reno8pro">
						<p class="pro">OPPO Reno8 Pro+ <span id="nei">12G+256G</span> <span id="color">逍遥青</span> 官方标配
						</p>

						<p style="margin-top: 20px; color: rgba(0,0,0,.55);">￥<span id="jia">3999</span>
							<span class="adsu" style="float: right;">
								<button id="reds">-</button>
								<span style="padding: 0 10px;">1</span>
								<button id="adds">+</button>
							</span>
						</p>
						<p style="color: red; margin-top: 20px; font-size: 12px;">预计到手价:￥<span id="yu">3989</span> <span
								style="float: right; margin-right: 15px; color:rgba(0,0,0,.55);">限购一件</span></p>
					</div>
				</div>
				<div class="colu">
					<p>配置</p>
					<div class="menus">
						<div class="btns" id="bajia">8+256G</div>
						<div class="btns" style="margin-left: 5px; color: red; border: 1px solid red;" id="sier">12+256G
						</div>
					</div>
					<p style="margin-top: 100px;">颜色</p>
					<div class="menus">
						<div class="btns" style="color: red;
						border: 1px solid red;" id="qin">逍遥青</div>
						<div class="btns" style="margin-left: 5px;" id="hui">漫游灰</div>
						<div class="btns" id="hei">暗涌黑</div>
					</div>
					<p style="margin-top: 144px;">选择套餐</p>
					<div class="menus">
						<div class="btns" style="color: red;
						border: 1px solid red;">官方标配</div>
					</div>
					<p style="margin-top: 79px;">保障服务(可选)</p>
					<p style="margin-top: 22px;">延长保</p>
					<div class="menus">
						<div class="btns" id="yanyi">OPPO延长保一年￥61 <s>￥79</s></div>
						<div class="btns" style="margin-left: 5px;" id="yanban">OPPO延长保半年￥59</div>
					</div>
					<p style="margin-top: 90px;">碎屏保</p>
					<div class="menus">
						<div class="btnss" id="sui">OPPPO碎屏保一年￥281 <s>￥299</s></div>
					</div>
					<p style="margin-top: 90px;">OPPO Care+</p>
					<div class="menus">
						<div class="btnss" id="care">OPPO Care+（意外保+延长保+电池焕新）￥399</div>
					</div>
				</div>
				<div class="btnus">
					<div class="off">取消</div>
					<div class="add">确定</div>
				</div>
			</div>
		</div>

		<div class="form-bg1 hide">
			<div class="upda">
				<div class="x" id="xx1">
					<img src="../img/login/x.png" alt="">
				</div>
				<div class="image">
					<div class="imgase" id="rn81">
						<img src="../img/findx5pro.png" alt="">
					</div>
					<div class="reno8pro">
						<p class="pro">OPPO Find X5 Pro <span id="nei1">12G+256G</span> <span id="color1">白瓷</span> 官方标配
						</p>

						<p style="margin-top: 20px; color: rgba(0,0,0,.55);">￥<span id="jia1">5499</span>
							<span class="adsu" style="float: right;">
								<button id="reds1">-</button>
								<span style="padding: 0 10px;">1</span>
								<button id="adds1">+</button>
							</span>
						</p>
						<p style="color: red; margin-top: 20px; font-size: 12px;">预计到手价:￥<span id="yu1">5489</span>
							<span style="float: right; margin-right: 15px; color:rgba(0,0,0,.55);">限购一件</span>
						</p>
					</div>
				</div>
				<div class="colu">
					<p>配置</p>
					<div class="menus">
						<div class="btns" id="bajia1">8+256G</div>
						<div class="btns" style="margin-left: 5px; color: red; border: 1px solid red;" id="sier1">
							12+256G
						</div>
					</div>
					<p style="margin-top: 100px;">颜色</p>
					<div class="menus">
						<div class="btns" style="color: red;
						border: 1px solid red;" id="qin1">黑釉</div>
						<div class="btns" style="margin-left: 5px;" id="hui1">白瓷</div>
						<div class="btns" id="hei1">水蓝</div>
					</div>
					<p style="margin-top: 144px;">选择套餐</p>
					<div class="menus">
						<div class="btns" style="color: red;
						border: 1px solid red;">官方标配</div>
					</div>
					<p style="margin-top: 79px;">保障服务(可选)</p>
					<p style="margin-top: 22px;">延长保</p>
					<div class="menus">
						<div class="btns" id="yanyi1">OPPO延长保一年￥61 <s>￥79</s></div>
						<div class="btns" style="margin-left: 5px;" id="yanban1">OPPO延长保半年￥59</div>
					</div>
					<p style="margin-top: 90px;">碎屏保</p>
					<div class="menus">
						<div class="btnss" id="sui1">OPPPO碎屏保一年￥281 <s>￥299</s></div>
					</div>
					<p style="margin-top: 90px;">OPPO Care+</p>
					<div class="menus">
						<div class="btnss" id="care1">OPPO Care+（意外保+延长保+电池焕新）￥399</div>
					</div>
				</div>
				<div class="btnus">
					<div class="off" id="off1">取消</div>
					<div class="add" id="add1">确定</div>
				</div>
			</div>
		</div>
		<div class="soo hide">
			<div class="content">
				<img src="../img/9c6f387.png" alt="" width="238px" height="50px">
				<img src="../img/login/x.png" alt="" width="24px" height="24px" style="float: right;margin-right: 290px;
		    margin-top: 20px;" id="xs">
				<input type="text" placeholder="OPPO Reno 8 " id="lol" value="">
				<button id="lkl">搜索</button>
				<div class="pop">
					<ul>
						<li class="tyt">OPPPO Reno 8</li>
						<li class="tyt">OPPO Find X5</li>
						<li class="tyt">OPPO K10</li>
						<li class="tyt">OPPO Watch3</li>
						<li class="tyt">一加 Ace</li>
					</ul>
				</div>
				<div class="opo">
					<p>搜索发现</p>
					<ul>
						<li>OPPPO Reno 8 <span>热</span></li>
						<li>OPPO Find X5 <span>热</span></li>
						<li>OPPO K10 <span>热</span></li>
						<li>OPPO Watch3 <span>热</span></li>
						<li>一加 Ace <span>热</span></li>
					</ul>
				</div>
				<div class="jk hide">
					<p><span style="color: red; border-bottom:1px solid red; padding-bottom: 8px;">综合</span><span
							style="margin-left:50px; color: rgba(0, 0, 0, 0.5);">最新</span><span
							style="margin-left:50px; color: rgba(0, 0, 0, 0.5);">价格</span>
					</p>
					<div class="jkj">
						<div class="recommend">
							<ul>
								<a href="../html/opporeno8pro+.html">
									<li style="margin-left: 15px;" title="OPPO Reno8 Pro+ 12G+256G 逍遥青 官方标配">
										<img src="../img/8pro+.png" alt="">
										<p style="color: black;">OPPO Reno8 Pro+ 12G+...</p>
										<div class="hhh" style="color: black;">满700减10</div>
										<p style="color: red; font-size: 28px; margin-top: 20px;">￥3989</p>
									</li>
								</a>
								<li title="OPPO Reno8 Pro 8G+256G 微醺 官方标配">
									<img src="../img/8pro.png" alt="">
									<p>OPPO Reno8 Pro 8G+...</p>
									<div class="hhh">满700减10</div>
									<p style="color: red; font-size: 28px; margin-top: 20px;">￥3199</p>
								</li>
								<li title="OPPO Reno7 官方标配 星雨心愿 8G+128G
		">
									<img src="../img/7.png" alt="">
									<p>OPPO Reno7 官方标配 星雨...</p>
									<div class="hhh">满700减10</div>
									<p style="color: red; font-size: 28px; margin-top: 20px;">￥2699</p>
								</li>
								<a>
									<li title="OPPO Reno7 SE 晨曦金 8G+256G">
										<img src="../img/7se.png" alt="">
										<p style="color: black;">OPPO Reno7 SE 晨曦金...</p>
										<div class="hhh" style="color: black;">满700减10</div>
										<p style="color: red; font-size: 28px; margin-top: 20px;">￥2399</p>
									</li>
								</a>
								<li title="OPPO Reno7 Pro 官方标配 暮雪金 12G+256G" style="margin-left: 15px;">
									<img src="../img/7pro.png" alt="">
									<p>OPPO Reno7 Pro 官方标配...</p>
									<div class="hhh">满700减10</div>
									<p style="color: red; font-size: 28px; margin-top: 20px;">￥3999</p>
								</li>
								<li title="OPPO Reno8 微醺 8G+128G 官方标配">
									<img src="../img/8.png" alt="">
									<p>OPPO Reno8 微醺 8G+128G...</p>
									<div class="hhh">满700减10</div>
									<p style="color: red; font-size: 28px; margin-top: 20px;">￥2499</p>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="../js/cart.js"></script>
	</body>

</html>
